<template>
  <view class="more-featured-page">
    <!-- 筛选条件 -->
    <view class="filter-section">
      <view class="filter-tabs">
        <view 
          v-for="(tab, index) in filterTabs" 
          :key="index" 
          class="tab-item" 
          :class="{ active: activeFilterIndex === index }"
          @tap="setActiveFilter(index)"
        >
          <text>{{ tab.name }}</text>
        </view>
      </view>
      
      <view class="sort-btn" @tap="toggleSortPopup">
        <text>{{ currentSort.name }}</text>
        <text class="sort-icon" :class="{ 'sort-open': showSortPopup }">▼</text>
      </view>
    </view>
    
    <!-- 排序选择弹窗 -->
    <view class="sort-popup" v-if="showSortPopup">
      <view 
        v-for="(sort, index) in sortOptions" 
        :key="index" 
        class="sort-item"
        :class="{ active: currentSortIndex === index }"
        @tap="selectSort(index)"
      >
        <text>{{ sort.name }}</text>
        <text class="check-icon" v-if="currentSortIndex === index">✓</text>
      </view>
    </view>
    
    <!-- 遮罩层 -->
    <view class="mask" v-if="showSortPopup" @tap="toggleSortPopup"></view>
    
    <!-- 价格区间筛选 -->
    <view class="price-filter">
      <view 
        v-for="(price, index) in priceOptions" 
        :key="index" 
        class="price-option" 
        :class="{ active: currentPriceIndex === index }"
        @tap="setPriceFilter(index)"
      >
        <text>{{ price.name }}</text>
      </view>
    </view>
    
    <!-- 精选养老院网格 -->
    <view class="featured-grid">
      <view 
        v-for="(item, index) in featuredList" 
        :key="index" 
        class="grid-item"
        @tap="goToDetail(item.id)"
      >
        <view class="item-image">
          <text>{{ item.image }}</text>
          <view class="item-tag" v-if="item.featured">精选</view>
        </view>
        
        <view class="item-info">
          <view class="item-name">{{ item.name }}</view>
          
          <view class="item-rating">
            <text v-for="n in 5" :key="n" class="star" :class="{ active: n <= item.rating }">★</text>
            <text class="rating-score">{{ item.rating }}</text>
          </view>
          
          <view class="item-tags" v-if="item.tags && item.tags.length">
            <text class="tag">{{ item.tags[0] }}</text>
            <text class="tag" v-if="item.tags.length > 1">{{ item.tags[1] }}</text>
          </view>
          
          <view class="item-price">
            <text>{{ item.price }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 加载中 -->
    <view class="loading-more" v-if="isLoading">
      <text>加载中...</text>
    </view>
    
    <!-- 没有更多数据 -->
    <view class="no-more" v-if="noMore && !isLoading">
      <text>没有更多数据了</text>
    </view>
    
    <!-- 返回顶部按钮 -->
    <view class="back-top" v-if="showBackTop" @tap="scrollToTop">
      <text class="back-top-icon">↑</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onPageScroll } from 'vue'

// 筛选选项
const filterTabs = ref([
  { name: '全部', value: 'all' },
  { name: '公办非营利性', value: 'public_non_profit', id: 1 },
  { name: '民办非营利性', value: 'private_non_profit', id: 2 },
  { name: '公办营利性', value: 'public_profit', id: 3 },
  { name: '民办营利性', value: 'private_profit', id: 4 }
])

// 排序选项
const sortOptions = ref([
  { name: '综合排序', value: 'comprehensive' },
  { name: '好评优先', value: 'rating' },
  { name: '价格最低', value: 'price_low' },
  { name: '价格最高', value: 'price_high' },
  { name: '开业时间最新', value: 'newest' }
])

// 价格区间选项
const priceOptions = ref([
  { name: '全部价格', min: 0, max: 0 },
  { name: '3000以下', min: 0, max: 3000 },
  { name: '3000-5000', min: 3000, max: 5000 },
  { name: '5000-8000', min: 5000, max: 8000 },
  { name: '8000以上', min: 8000, max: 0 }
])

// 状态变量
const activeFilterIndex = ref(0)
const currentSortIndex = ref(0)
const currentPriceIndex = ref(0)
const currentSort = ref(sortOptions.value[0])
const showSortPopup = ref(false)
const featuredList = ref([])
const isLoading = ref(false)
const page = ref(1)
const noMore = ref(false)
const showBackTop = ref(false)

// 设置筛选条件
const setActiveFilter = (index) => {
  activeFilterIndex.value = index
  resetList()
  loadData()
}

// 切换排序弹窗
const toggleSortPopup = () => {
  showSortPopup.value = !showSortPopup.value
}

// 选择排序方式
const selectSort = (index) => {
  currentSortIndex.value = index
  currentSort.value = sortOptions.value[index]
  showSortPopup.value = false
  resetList()
  loadData()
}

// 设置价格筛选
const setPriceFilter = (index) => {
  currentPriceIndex.value = index
  resetList()
  loadData()
}

// 重置列表
const resetList = () => {
  featuredList.value = []
  page.value = 1
  noMore.value = false
}

// 页面滚动监听
const handlePageScroll = (e) => {
  showBackTop.value = e.scrollTop > 300
}

// 返回顶部
const scrollToTop = () => {
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 300
  })
}

// 加载数据
const loadData = () => {
  if (isLoading.value) return
  
  isLoading.value = true
  
  // 模拟请求
  setTimeout(() => {
    // 模拟数据
    const newItems = Array.from({ length: 10 }, (_, i) => {
      const price = 2000 + Math.floor(Math.random() * 8000)
      const isPriceInRange = () => {
        const { min, max } = priceOptions.value[currentPriceIndex.value]
        if (currentPriceIndex.value === 0) return true
        if (min > 0 && max > 0) return price >= min && price <= max
        if (min > 0 && max === 0) return price >= min
        if (min === 0 && max > 0) return price <= max
        return true
      }
      
      // 根据价格筛选
      if (isPriceInRange()) {
        return {
          id: page.value * 10 + i,
          name: `精选养老院${page.value * 10 + i}`,
          image: '养老院图片',
          rating: (Math.random() * 2 + 3).toFixed(1),
          price: `${price}/月起`,
          tags: ['特级护理', '医疗资源', '环境优美', '文化养老', '亲情养老'].sort(() => 0.5 - Math.random()).slice(0, Math.floor(Math.random() * 3) + 1),
          featured: Math.random() > 0.7
        }
      } else {
        return null
      }
    }).filter(item => item !== null)
    
    featuredList.value = [...featuredList.value, ...newItems]
    
    // 模拟数据加载完毕
    if (page.value >= 3) {
      noMore.value = true
    }
    
    isLoading.value = false
    page.value++
  }, 800)
}

// 查看详情
const goToDetail = (id) => {
  uni.navigateTo({
    url: `/pages/nursing-home-detail/index?id=${id}`
  })
}

// 注册页面滚动事件
uni.onPageScroll(handlePageScroll)

// 页面加载
onMounted(() => {
  loadData()
})
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
  height: 100%;
}

.more-featured-page {
  min-height: 100%;
  padding-bottom: 20px;
  
  .filter-section {
    background-color: #fff;
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(195, 227, 227, 0.3);
    
    .filter-tabs {
      display: flex;
      align-items: center;
      flex: 1;
      overflow-x: auto;
      white-space: nowrap;
      
      &::-webkit-scrollbar {
        display: none;
      }
      
      .tab-item {
        padding: 6px 12px;
        margin-right: 10px;
        background-color: rgba(195, 227, 227, 0.1);
        border-radius: 15px;
        transition: all 0.3s;
        
        text {
          font-size: 13px;
          color: #2c7873;
        }
        
        &.active {
          background-color: rgba(195, 227, 227, 0.3);
          
          text {
            font-weight: 600;
          }
        }
      }
    }
    
    .sort-btn {
      display: flex;
      align-items: center;
      padding: 6px 12px;
      background-color: rgba(195, 227, 227, 0.1);
      border-radius: 15px;
      margin-left: 10px;
      
      text {
        font-size: 13px;
        color: #2c7873;
      }
      
      .sort-icon {
        font-size: 10px;
        margin-left: 3px;
        transition: transform 0.3s;
      }
      
      .sort-open {
        transform: rotate(180deg);
      }
    }
  }
  
  .sort-popup {
    position: absolute;
    top: 60px;
    right: 15px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 101;
    min-width: 120px;
    overflow: hidden;
    
    .sort-item {
      padding: 12px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      text {
        font-size: 14px;
        color: #2c7873;
      }
      
      .check-icon {
        color: #c3e3e3;
        font-weight: bold;
      }
      
      &.active {
        background-color: rgba(195, 227, 227, 0.1);
        
        text {
          color: #2c7873;
          font-weight: 600;
        }
        
        .check-icon {
          color: #2c7873;
        }
      }
      
      &:active {
        background-color: rgba(195, 227, 227, 0.2);
      }
    }
  }
  
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 100;
  }
  
  .price-filter {
    background-color: #fff;
    padding: 12px 15px;
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    border-bottom: 1px solid rgba(195, 227, 227, 0.3);
    
    &::-webkit-scrollbar {
      display: none;
    }
    
    .price-option {
      padding: 6px 12px;
      margin-right: 10px;
      background-color: rgba(195, 227, 227, 0.1);
      border-radius: 15px;
      transition: all 0.3s;
      
      text {
        font-size: 13px;
        color: #2c7873;
      }
      
      &.active {
        background-color: rgba(195, 227, 227, 0.3);
        
        text {
          font-weight: 600;
        }
      }
    }
  }
  
  .featured-grid {
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    
    .grid-item {
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      
      .item-image {
        height: 120px;
        background-color: rgba(195, 227, 227, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        
        text {
          color: #6FB3B8;
          font-size: 15px;
        }
        
        .item-tag {
          position: absolute;
          top: 8px;
          right: 8px;
          padding: 3px 6px;
          background-color: rgba(195, 227, 227, 0.8);
          border-radius: 3px;
          font-size: 10px;
          color: #2c7873;
          font-weight: 600;
        }
      }
      
      .item-info {
        padding: 8px;
        
        .item-name {
          font-size: 14px;
          font-weight: 600;
          color: #2c7873;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: 5px;
        }
        
        .item-rating {
          display: flex;
          align-items: center;
          margin-bottom: 5px;
          
          .star {
            font-size: 12px;
            color: #ccc;
            margin-right: 1px;
            
            &.active {
              color: #FFB422;
            }
          }
          
          .rating-score {
            font-size: 12px;
            color: #FFB422;
            margin-left: 4px;
            font-weight: 600;
          }
        }
        
        .item-tags {
          display: flex;
          margin-bottom: 5px;
          
          .tag {
            font-size: 10px;
            color: #6FB3B8;
            background-color: rgba(195, 227, 227, 0.2);
            padding: 2px 6px;
            border-radius: 10px;
            margin-right: 5px;
            white-space: nowrap;
          }
        }
        
        .item-price {
          font-size: 14px;
          color: #FF6B6B;
          font-weight: 600;
        }
      }
    }
  }
  
  .loading-more, .no-more {
    text-align: center;
    padding: 15px 0;
    
    text {
      font-size: 14px;
      color: #6FB3B8;
    }
  }
  
  .back-top {
    position: fixed;
    right: 20px;
    bottom: 30px;
    width: 40px;
    height: 40px;
    background-color: rgba(195, 227, 227, 0.9);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 99;
    
    .back-top-icon {
      color: #2c7873;
      font-size: 20px;
      font-weight: bold;
    }
    
    &:active {
      transform: scale(0.95);
      background-color: rgba(195, 227, 227, 1);
    }
  }
}
</style> 